<template>
  <div class="notSupport-container">
    <div class="notSupport-box">
      <img :src="require('@/assets/images/error.png')" class="ErrorPage_img_2aMXQ">
      <div class="name">{{ fileResource.originalFileName }}.{{ fileResource.fileExt }}</div>
      <div class="msg">
        <div>该文件暂不支持在线预览，请下载查看</div>
      </div>
      <div class="btns">
        <el-button type="primary" @click="downLoad">下 载</el-button>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileResource: {}
    }
  },
  mounted() {
    var { id } = this.$route.params
    this.fetchData(id)
  },
  methods: {
    fetchData(id) {
      this.$store.dispatch('fileResourcesGetByUUID', id).then((res) => {
        this.fileResource = res
        document.title = this.fileResource.originalFileName + '.' + this.fileResource.fileExt
      })
    },
    downLoad() {
      this.$store.dispatch('downLoadFile', this.fileResource.fileUuid).then(response => {
        this.T.downloadFile(response, this.fileResource.originalFileName + '.' + this.fileResource.fileExt)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.notSupport-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .notSupport-box {
        background: #fff;
        padding: 30px 0 60px;
        width: 450px;
        box-shadow: 0 12px 30px 0 rgb(0 0 0 / 5%);
        text-align: center;
        img {
            display: block;
            width: 150px;
            height: 150px;
            user-select: none;
            margin: 0 auto;
        }
        .name {
            color: #3c414b;
            font-size: 16px;
            //line-height: 16px;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            margin: 16px 30px 0;
        }
        .msg {
            color: #949aae;
            font-size: 14px;
            line-height: 20px;
            margin: 12px auto 0;
            width: 280px;
        }
        .btns{
            margin-top: 32px;
            .el-button{
                width: 124px;
            }
        }
    }
}
</style>
